<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">

      <el-form-item label="房產名称" prop="name">
        <el-input v-model.trim="form.name" autocomplete="off" />
      </el-form-item>

      <el-form-item label="房产所属人" prop="ownerId">
        <el-select v-model="form.ownerId" placeholder="请选择房产所属人" :disabled="isDisabled">
          <el-option v-for="option in owerList" :key="option.value" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="省份" prop="province">
        <el-select v-model="form.province" placeholder="请选择省份" @change="handleProvinceChange">
          <el-option v-for="option in provinceList" :key="option.value" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="城市" prop="city">
        <el-select v-model="form.city" placeholder="请选择城市" @change="handleCityChange">
          <el-option v-for="option in cityList" :key="option.value" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="地区" prop="area">
        <el-select v-model="form.area" placeholder="请选择地区" @change="handleStreetChange">
          <el-option v-for="option in areaList" :key="option.value" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="街道" prop="street">
        <el-select v-model="form.street" placeholder="请选择街道" >
          <el-option v-for="option in streetList" :key="option.value" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="detailedAddress">
        <el-input v-model.trim="form.detailedAddress" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { doEdit, getOwnerList,getAllProvinces,getCityByProId,getAreaByCityId,getStreets } from '@/api/house/property'

  export default {
    name: 'UserManagementEdit',
    data() {
      return {
        form: {
          ownerId: '',
          province: '',
          city: '',
          area: '',
          street: '',
          name: '',
          ownerPhone: '',
        },
        rules: {
          ownerId: [{ required: true, trigger: 'blur', message: '请输入房产所属人' }],
          province: [{ required: true, trigger: 'blur', message: '请输入房产所在省份' }],
          city: [{ required: true, trigger: 'blur', message: '请输入房产所在城市' }],
          area: [{ required: true, trigger: 'blur', message: '请输入房产所在区域' }],
          street: [{ required: true, trigger: 'blur', message: '请输入房产详细地址' }],
          name: [{ required: true, trigger: 'blur', message: '请输入房产名称' }],
        },
        title: '',
        dialogFormVisible: false,
        owerList: [],
        provinceList: [],
        cityList: [],
        areaList: [],
        streetList: [],
        disabled: false,
      }
    },
    created() {
      this.fetchOwnerOptions()
      this.getAllProvinces()
    },
    methods: {
      showEdit(row) {
        if (!row) {
          this.title = '添加'
          this.disabled = false
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
          this.disabled = true
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(this.form)
            this.$baseMessage(msg, 'success')
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
      async fetchOwnerOptions() {
        try {
          const response = await getOwnerList() // 查询所有房东信息
          this.owerList = response.data.map((item) => ({
            label: item.name,
            value: item.userId,
          }))
        } catch (error) {
          console.error('Failed to fetch property names', error)
        }
      },

      async getAllProvinces() {
        try {
          const response = await getAllProvinces({pageSize:1000})
          this.provinceList = response.data.list.map((item) => ({
            label: item.province,
            value: item.provinceid,
          }))
        } catch (error) {
          console.error('Failed to fetch property names', error)
        }
      },

      async handleProvinceChange(){
        //根据省份查询市区
        try {
          const response = await getCityByProId({province:this.form.province,pageSize:1000}) 
          this.cityList = response.data.list.map((item) => ({
            label: item.city,
            value: item.cityid,
          }))
        } catch (error) {
          console.error('Failed to fetch property names', error)
        }
      },

      async handleCityChange(){
        //根据市查询区
        try {
          const response = await getAreaByCityId({city:this.form.city,pageSize:1000}) 
          this.areaList = response.data.list.map((item) => ({
            label: item.area,
            value: item.areaid,
          }))
        } catch (error) {
          console.error('Failed to fetch property names', error)
        }
      },

      async handleStreetChange(){
        //根据市查询区
        try {
          const response = await getStreets({area:this.form.area,pageSize:1000})
          this.streetList = response.data.list.map((item) => ({
            label: item.name,
            value: item.code,
          }))
        } catch (error) {
          console.error('Failed to fetch property names', error)
        }
      }

    },
    computed: {
      isDisabled() {
        // 根据密码字段是否有值来决定是否禁用输入框
        return this.disabled // 如果有值，则禁用输入框
      },
    },
  }
</script>
